事件
描述
- 事件是浏览器告知JavaScript程序用户的行为
事件属性
HTML的元素属性
- HTML元素可以直接添加事件属性
body>
<!-- 在html页面中添加事件属性 - 属性值为函数名 -->
<button onclick="sclick()">按钮</button>
<script>
/*
在html页面设置事件属性
该事件作用在当前元素，不能绑定多个
并且没能使HTML页面结构与JavaScript之间存在有效分离
*/
/* 设置事件处理函数 */
function sclick() {
console.log( '娃哈哈哈哈哈哈哈' );
}
</script>
</body>DOM事件属性
- DOM对象可以设置事件属性
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
/*
DOM对象的事件属性
onclick = function()
该事件可以绑定多个元素
也做到了HTML结构与JavaScript的有效分离
*/
/* 先定位元素位置 - 注意类数组的调用值 */
var b1 = document.getElementsByTagName( 'button' )[0];
/* 设置鼠标点击事件 */
b1.onclick = function () {
console.log( '嘻嘻嘻嘻嘻嘻嘻之郎' );
};
/* 多个相同元素绑定一个事件 */
var b2 = document.getElementsByTagName( 'button' );
/* 先遍历类数组获取到每一个元素 */
for ( var bt = 0; bt < b2.length; bt++ ) {
var bs = b2[bt];
/* 在进行事件绑定 */
bs.onclick = function () {
console.log( '嘻嘻嘻嘻嘻嘻嘻之郎' );
}
}
</script>
</body>事件监听器
- DOM对象提供的 addEventListener()方法
- 事件监听器也可以设置事件属性
-
该方法有浏览器兼容问题
- IE8 以下版本不支持
-
IE8 提供了解决方法
- attachEvent()方法
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
/*
事件监听器
addEventListener（）“括号中先写事件名‘没有on’，在写事件事件处理函数，在写布尔值‘可省略’”
可以为单个元素绑定多个事件
*/
/* 先定位指定元素的位置 */
var b1 = document.getElementsByTagName( 'button' )[0];
/* 设置事件监听器 */
b1.addEventListener( 'click', function() {
console.log( '我特啊呦赌赢' );
} );
/* 多个相同元素绑定一个事件 */
var b2 = document.getElementsByTagName( 'button' );
/* 先遍历类数组获取到每一个元素 */
for ( var bs = 0; bs < b2.length; bs++ ) {
var bx = b2[bs];
/* 设置事件监听器 */
bx.addEventListener('click', function () {
console.log('我特啊呦赌赢');
});
}
/*
事件监听器存在浏览器兼容问题
attachEvent（）：IE 8 专门的事件监听器
括号中先写事件名‘有on’，在写事件事件处理函数，在写布尔值‘可省略’
*/
b1.attachEvent( 'onclick', function () {
console.log( '我特啊呦弄啥嘞！...' );
} );
</script>
</body>移除绑定事件
- removeEventListener（）
- 表示对已绑定的事件进行移除
<body>
<button id="b1">按钮</button>
<script>
/*
移除绑定事件
removeEventListener（）
括号中先写事件名‘没有on’，在写事件处理函数名（用于指定目标事件）
只能作用在事件监听器上
*/
var b = document.getElementById( 'b1' );
/* 单独写事件处理函数并命名 - 方便指定目标 */
function btn() {
console.log( '我特啊呦弄啥嘞！...' );
}
/* 对指定的目标事件进行添加 */
b.addEventListener( 'click', btn );
/* 对指定的目标事件进行移除 */
b.removeEventListener( 'click', btn );
/* 移除绑定事件有兼容问题 */
/* 专门提供了解决IE 8 的问题 */
b.detachEvent( 'click', btn );
</script>
</body>事件对象
-
Event事件对象
- 所有设置事件属性的方式都能使用
- 该对象存在于事件处理函数的参数中
<body>
<button id="b1">按钮</button>
<script>
/*
Event事件对象
所有设置事件属性的方式都能使用
该对象存在于事件处理函数的参数中
*/
var b = document.getElementById( 'b1' );
b.addEventListener( 'click', function( event ) {
console.log( event );
} );
/*
Event事件对象具有兼容问题
该事件对象被添加到 window 对象中
*/
b.attachEvent( 'onclick', function( event ) {
// event事件对象固定写法
var bevent = event || window.event;
console.log( bevent );
} );
</script>
</body>阻止默认行为
- event.preventDefault()
- 表示阻止目标元素所绑定的事件运行
<body>
<a id="a1" href="事件对象.html">这是链接</a>
<script>
/*
阻止默认行为
event.preventDefault()
表示阻止目标元素所绑定的事件运行
*/
/* 定位目标元素的位置 */
var a = document.getElementById( 'a1' );
/* 绑定事件属性 */
/*a.addEventListener( 'click', function(event) {
/!* 阻止事件的运行 *!/
event.preventDefault();
} );*/
/*
return false语句
也具有阻止默认行为的功能
该语句之后的代码将不会被执行
建议放置在事件处理函数的最后面
该语句不能作用在 addEventListener（）中
*/
a.onclick = function ( event ) {
event.preventDefault();
return false;
}
</script>
</body>获取鼠标坐标
pageX和pageY
- 表示获取鼠标在页面中的位置
<body>
<button id="b1">按钮</button>
<script>
var b = document.getElementById( 'b1' );
b.addEventListener( 'click', function ( event ) {
console.log( event.pageX, event.pageY );
} );
</script>
</body>clientX和clientY
- 表示获取鼠标在可视窗口中的位置
<body>
<button id="b2">按钮</button>
<script>
var b = document.getElementById( 'b2' );
b.addEventListener( 'click', function ( event ) {
console.log( event.clientX, event.clientY );
} );
</script>
</body>screenX和screenY
- 表示获取鼠标在显示器屏幕中的位置
<body>
<button id="b3">按钮</button>
<script>
var b = document.getElementById( 'b3' );
b.addEventListener( 'click', function ( event ) {
console.log( event.screenX, event.screenY );
} );
</script>
</body>offsetX和offsetY
- 表示获取鼠标相对于在父元素中的位置
<body>
<button id="b4">按钮</button>
<script>
var b = document.getElementById( 'b4' );
b.addEventListener( 'click', function ( event ) {
console.log( event.offsetX, event.offsetY );
} );
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。